<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.ImportDialogVisible"
           @cancel="closeDialog"
           @ok="saveModel"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <vue-form>
            <div class="row">

                <div class="col-xs-12" v-if="!loading">
                    <vue-form-item label="上传图片">
                        <VueUpload :size="1024" accept="image/jpeg, image/png"
                                   @input="fileChange" class="btn btn-primary btn-xs"> {{model.file_name}}
                        </VueUpload>
                        <br>
                        <span class="text-danger">允许上传类型：“ .png .jpg .jpeg”</span>
                    </vue-form-item>
                </div>
                <div class="col-xs-12" v-if="loading">
                    <div class="spiner-example">
                        <div class="sk-spinner sk-spinner-cube-grid">
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                            <div class="sk-cube"></div>
                        </div>
                    </div>
                </div>
            </div>
        </vue-form>
    </modal>

</template>

<script>
    import VueUpload from 'vue-upload-component';

    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                loading: false,
                model: this.$modelDataSource({
                    url: 'wechat/imgUpload',
                    dataKey: 'model',
                    attributes: {
                        file: '',
                        file_name: '请选择文件',
                    }
                })
            };
        },
        methods: {
            closeDialog: function () {
//                console.log(11);
                if (this.loading == false) {
                    this.model.reset();
                    this.stateManager.ImportDialogVisible = false;
                }

            },
            checkName: function (name) {
                return /^(.+?)\.(jpeg|png|jpg|JPEG|PNG|JPG)$/.test(name);
            },
            fileChange(file) {
                // console.log(file[0].file.type);
                if (file[0].file.size > 1024000) {
                    toastr.error('请上传1M以下的图片');
                } else if (!this.checkName(file[0].file.name)) {
                    toastr.error('图片格式有误');
                } else {
                    this.model.file = file[0].file;
                    this.model.file_name = file[0].name;
                }
            },
            saveModel: function () {
                let self = this;
                if (self.model.file != '') {
                    self.validate(function () {
                        self.loading = true;
                        let formData = new FormData();
                        formData.append('file', self.model.file);
                        formData.append('file_name', self.model.file_name);
                        let config = {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }
                        axios.post('wechat/imgUpload', formData, config).then(function (res) {
                            self.stateManager.refreshList = true;
                            self.loading = false;
                            self.closeDialog();
                            toastr.success('上传成功！');
                        }).catch(function (res) {
                            console.log(res);
                            self.loading = false;
                            self.stateManager.refreshList = true;
                            toastr.error('上传失败');
                        })
                    })
                }
//                ladda.start();
            },
            validate: function (successCallback, failedCallback) {
                this.$validator.validateAll().then(() => {
                    // eslint-disable-next-line
                    console.log('验证通过');
                    typeof successCallback === 'function' && successCallback();
                }).catch(() => {
                    // eslint-disable-next-line
                    console.log('验证未通过');
                    typeof failedCallback === 'function' && failedCallback();
                });

            }
        },
        computed: {
            modalTitle: function () {
                return '图片上传';
            },
        },
        components: {
            VueUpload
        }
    }
</script>
